<template>
  <!-- conversion-index -->
  <div v-if="bIsShow && jurisdiction" class="conversion-index" :style="{bottom: bIsShow ? '0px' : '5000px'}">
    <div v-if="false" class="table-1 conversion-area">
      <!-- table-1 -->
      <div class="" style="width: 300px; height: 10000px; background: red;"></div>
    </div>

    <div class="table-2 conversion-area">
      <!-- table-2 -->
      <p class="conversion-area-btns">
        <el-button @click="click2Expand" size="small">展开/收起</el-button>
      </p>

      <div class="json-data" id="json-target"
        ref="jsonData"
        v-html="jsonFormatData ? jsonFormatData : '等待...'"
        @input="onJsonFormatChange"
        @paste="onJsonFormatChange"
        @change="onJsonFormatChange">
      </div>
    </div>

    <div class="table-3 conversion-area">
      <!-- table-3 -->
      <p class="conversion-area-btns">
        <el-button @click="onTextAreaChange" size="small">validate json</el-button>
      </p>

      <textarea
        v-model="val"
        name="name"
        placeholder="在此输入json字符串...">
      </textarea>
    </div>

    <div class="conversion-area-footer">
      <el-button @click="bIsShow=false" size="small">hide</el-button>
      <el-button @click="click2Submit" size="small">submit</el-button>
    </div>
  </div>
</template>

<script>
import { isObject, isArray, isHasOwnProperty } from '@/utils/public.js';
import { dynamicsLoadScript } from '@/views/card/js/mixins/dynamics-load-script.js';
import { EventBus } from '@/store/index.js';

export default {
  mixins: [dynamicsLoadScript],
  emits: ['change'],
  data() {
    return {
      val: '',
      jsonFormatData: '',
      bIsExpanded: false,
      bIsShow: false,
    }
  },
  props: {
    objData: [Object, Array],
    jurisdiction: Boolean,
  },
  computed: {
    jsonVal: {
      get() {
        try {
          return JSON.stringify(this.objData);
        } catch(e) {
          // console.log(e);
          return '';
        }
      },
      set(v) {
        this.val = v;
      },
    },
  },
  created() {
    // 加载必备插件
    this.init();
  },
  mounted() {
    // EventBus
    EventBus.$on('ConversionDialogShow', this.handler2Show);
  },
  methods: {
    init() {
      // 加载必备插件
      if(!this.jurisdiction || isHasOwnProperty(window, 'JSONFormat')) return;
      this.dynamicsLoadScripts(
        [
          this.env.publicPath + 'js/turn/jquery.min.1.7.js',
          this.env.publicPath + 'js/json/jquery.json.js',
          this.env.publicPath + 'js/json/jsonlint.js',
          this.env.publicPath + 'js/json/bignumber.min.js',
        ],
        [
          'Jquery',
          'JqueryJson',
          'Jsonlint',
          'Bignumber',
        ],
        () => {
          // 初始化数据
          if(this.jurisdiction) this.val = this.jsonVal;
        },
      );
    },
    handler2Show(bool) {
      if(this.jurisdiction) this.bIsShow = bool;
      else this.bIsShow = false;

      this.init();
    },
    onTextAreaChange() {  // val 编辑
      // 0.
      if(!this.jurisdiction) return;

      // 1. 处理 JSON 字符串
      try {
        let val = this.val;
        // console.log(val);

        val = window.jsonlint.parse(val);
        // console.log(val);

        val = JSON.stringify(val, null, "  ");
        // console.log(val);

        this.jsonVal = val;
        this.jsonFormatData = new window.JSONFormat(val, 4).toString();
      } catch(e) {
        this.jsonFormatData = e.message;
      }
    },
    onJsonFormatChange() {
      // 0.
      if(!this.jurisdiction) return;

      // 1.
      var text = window.$('#json-target').html().replace(/<br\/>/g, "\n").replace(/<br>/g, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/ig, " ").replace(/Object{...}/ig, "").replace(/Array\[[0-9]+\]/ig, "");
      this.jsonVal = text;
    },
    click2Expand() {
      // 0.
      if(!this.jurisdiction) return;

      // 1.
      if(!this.bIsExpanded) {
        window.$(window.$(".fa-minus-square-o").toArray().reverse()).click();
        this.bIsExpanded = true;
      }
      else {
        while (window.$(".fa-plus-square-o").length > 0) {
          window.$(".fa-plus-square-o").click();
        }
        this.bIsExpanded = false;
      }
    },
    click2Submit() {
      // 0.
      if(!this.jurisdiction) return;

      // 1.
      this.$confirm('此操作将替换数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try {
          if(this.jurisdiction) this.$emit('change', window.jsonlint.parse(this.val));
          else this.$message("权限不足！");
        } catch(e) {
          // console.log(e);
          this.$message(e.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },

    /* 工具方法 */
    _isObject(val) {
      return isObject(val);
    },
    _isArray(val) {
      return isArray(val);
    },
  },
  watch: {
    objData: {
      immediate: true,
      deep: true,
      handler() {
        // 初始化数据
        if(this.jurisdiction) {
          this.val = this.jsonVal;
          this.jsonFormatData = '';
          this.bIsExpanded = false;
        }
      },
    },
  },
}
</script>

<style lang="scss" scope>
  .conversion-index {
    display: flex;
    position: fixed;
    top: 0;
    // bottom: 5000px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, .95);
    z-index: 999;
    transition: all 0.5s ease-in-out;

    .conversion-area {
      position: relative;
      display: block;
      flex: 1;
      min-width: 200px;
      height: 100%;
      border: 1px solid #aaa;
      overflow: auto;
      padding-top: 50px;

      .conversion-area-btns {
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        right: 0;
        top: 0;
        text-align: center;
        border-bottom: 1px solid #aaa;
      }
    }

    .el-icon-plus, .el-icon-minus {
      font-size: 12px;
      border: 1px solid #222;
      color: #222;
      line-height: 14px;
      height: 14px;
      width: 14px;
      text-align: center;
      margin: 0 2px;
    }
  }
  .conversion-area-footer {
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 40px;
    bottom: 0;
    text-align: center;
    padding-top: 10px;
    background: #fff;
    box-sizing: content-box;

    &:hover {
      border-top: 1px solid #aaa;
    }
  }

  .table-2 {
    display: flex !important;
    flex-direction: column;

    .json-data {
      padding: 10px 10px 60px 30px;
      font-size: 14px;
      overflow: auto;
    }
  }
  .table-3 {
    display: flex !important;
    flex-direction: column;

    textarea {
      flex: 1;
      padding: 10px 10px 60px 30px;
      resize: none;
      outline: none;
      width: 100%;
      border: none;
      font-size: 13px;
      color: #222;
      font-family: menlo, monospace, Tahoma,"微软雅黑","幼圆";
    }
  }
</style>
